<template>
<div>
  <div style="width: 1200px;height: 200px">
    <div style="float: left">
      <van-image
          round
          width="8rem"
          height="8rem"
          :src=url+img
          v-if="img!=null"/>
      <div v-else>
        <van-image
            round
            width="8rem"
            height="8rem"
            :src=url+img
            />
        <van-uploader :after-read="upload" ></van-uploader>
      </div>

    </div>
    <div style="float: left" >
      <div style="height: 80px"></div>
      <div v-if="nickname!=null" style="font-size: 25px">{{nickname}} &ensp;|</div>
      <div v-else><van-field label="昵称" placeholder="请输入昵称" @keyup.enter="post_nicheng" v-model="nicheng"></van-field> &ensp; |</div>

    </div><div style="float: left;font-size: 25px">
    <div style="height: 80px;"></div>
    &ensp;积分:{{list['integral']}}&ensp;|&ensp;余额:{{list['money']}}</div>
  </div>
  <div style="width: 1200px;height: 150px">

      <el-tabs :tab-position="tabPosition" style="height: 300px;">
        <el-tab-pane label="账户信息">
         <center>
           <div style="width: 1000px;height: 200px">
             <div>
               用户类型:{{list['assess_type']}}
             </div>
             <br>
             <div v-if="list['mobile']!=null"> 手机号:{{list['mobile']}}</div>
             <div v-else>手机号:未绑定</div>
             <br>
             <div v-if="list['password']!=null"> 账户密码:{{'******'}}</div>
             <div v-else>账户密码:未绑定</div>
             <br>
             <div v-if="list['email']!=null"> 邮箱email:{{list['email']}}</div>
             <div v-else>邮箱email: 未填写</div>
             <br>
             <div v-if="list['account_one'] !='0'">开户状态:已开户</div>
             <div v-else>前去开户页面,开户</div>
           </div>
         </center>
        </el-tab-pane>
        <el-tab-pane label="我的银行卡">
        <center>
          <div>
            <table align="center" width="500px" border="">
              <tr>
                <td>银行名</td>
                <td>银行卡号</td>
                <td>状态</td>
                <td>操作</td>
              </tr>
              <tr v-for="i in cardlist" :key="i.id" >
                <td>{{i.card_name}}</td>
                <td>{{i.card_number}}</td>
                <td v-if="i.stats == 1">审核中</td>
                <td v-else> 正常</td>
                <td>
                  <van-button @click="send(i.id)">解绑</van-button>
                </td>
              </tr>

            </table>

            <van-popup v-model:show="show">
              <van-field label="输入密码" v-model="pay_password" type="password"/>
              <van-field label="确认密码" v-model="pay_password1" type="password" />
              <van-button @click="send1()">确认解绑</van-button>
            </van-popup>

          </div>
        </center>
        </el-tab-pane>
        <el-tab-pane label="充值">
          <center><zhongzhi></zhongzhi></center>
        </el-tab-pane>
        <el-tab-pane label="提现">
          <center><withdrawals>

          </withdrawals></center>
        </el-tab-pane>
        <el-tab-pane label="待还款">
          <center><repay>
          </repay></center>
        </el-tab-pane>
        <el-tab-pane label="我的订单">
          <center><my_order>
          </my_order></center>
        </el-tab-pane>
        <el-tab-pane label="我的基金">
          <center><my_fund>
          </my_fund></center>
        </el-tab-pane>
      </el-tabs>

  </div>
</div>
</template>

<script>
import axios from "axios";
import zhongzhi from "@/components/zhongzhi";
import withdrawals from "@/components/withdrawals";
import repay from "@/components/repay";
import my_order from "@/components/my_order";
import my_fund from "@/components/my_fund";

export default {
name: "personal center",
  data(){
  return{
    uid:localStorage.getItem('usrid'),
    url:'http://localhost:5000/static/',
    list:[],
    img:'',
    nicheng:'',
    nickname:'',
    activeIndex: '1',
    tabPosition: 'left',
    cardlist:[],
    show:false,
    pay_password:'',
    pay_password1:'',
    id:'',
  }
  },
  components:{
    zhongzhi:zhongzhi,
    withdrawals:withdrawals,
    repay:repay,
    my_order:my_order,
    my_fund:my_fund,
  },
  methods:{
    getlist(){
      axios.get('http://localhost:5000/get_bank_card?uid='+this.uid).then(res=>{
        console.log(res);
        this.cardlist = res.data.data
      })
    },
    send(id){
      this.show = true
      this.id = id
    },
    send1(){
      if(this.pay_password !==this.pay_password1){
        alert('两次密码不一致')
        return false
      }
      axios.get('http://localhost:5000/delmybank?id='+this.id+'&pay_password='+this.pay_password).then(res=>{
        console.log(res);
        if (res.data.code==200){
          this.show=false
        }
      })
    },
  // 添加昵称
    post_nicheng(){
      this.myaxios('http://localhost:5000/upload_avatar','get',{'uid':this.uid,'nicheng':this.nicheng})
      .then(res=>{
        console.log(res)
        if (res.code==200){
          this.nickname=this.nicheng
        }
      })
    },
  // 上传头像
    upload(file){
      let data=new FormData()
      data.append('file',file.file)
      const myaxioe= axios.create({withCredentials:false})
      myaxioe({method:'post',url:'http://localhost:5000/upload',data:data})
      .then(res=>{
        console.log(res.data.filename)
        this.img=res.data.filename
        this.upload_avatar()
      })
    },
    // 上传头像
    upload_avatar(){
      this.myaxios('http://localhost:5000/upload_avatar','get',{'uid':this.uid,'img':this.img})
      .then(res=>{
        console.log(res)
      })
    },
  // 获取数据
    git_data(){
      console.log(this.uid)
      this.myaxios('http://localhost:5000/personal_information','get',{'uid':this.uid}).then(res=>{
        console.log(res)
        this.list=res.list
        if (this.img==''){
          this.img=res.list['pic']
        } if(this.nickname==''){
          this.nickname=res.list['nickname']
        }
        console.log(this.list['integral'])
      })
    },
  },
  mounted() {
    this.getlist()
  this.git_data()
  }
}
</script>

<style scoped>

</style>
